<div class="clr-row">
  <div
    *ngIf="unitGroup"
    class="clr-col-xs-12	clr-col-sm-6	clr-col-md-6	clr-col-lg-6	clr-col-xl-6"
  >
    <h5>自动购买者聚合分组.</h5>

    <button class="btn btn-success-outline" (click)="allOn(true)">
      全部开启
    </button>
    <button class="btn btn-danger-outline" (click)="allOn(false)">
      全部关闭
    </button>
    <button class="btn btn-outline" (click)="multiModal = true">
      最大购买倍数
    </button>

    <clr-modal [(clrModalOpen)]="multiModal">
      <h3 class="modal-title">设置最大购买倍数</h3>
      <div class="modal-body">
        <form clrForm class="clr-form clr-form-compact">
          <div class="form-group">
            <label for="price_m">最大购买倍数:</label>
            <input
              class="clr-input"
              placeholder="Priority"
              name="price_m"
              [(ngModel)]="reqMulti"
              type="number"
              placeholder="1"
              min="0"
              max="1"
              step="0.01"
              size="2"
            />
          </div>

          <!-- <label>AutoBuyer type:</label> -->
          <div class="form-group">
            <label for="sel">自动购买者类型:</label>
            <div class="select">
              <select name="sel" [(ngModel)]="autoBuyType">
                <option value="0">所有类型</option>
                <option
                  value="1"
                  *ngIf="ms.game.allPrestige.autoBuyUnlock.autoBuyQuantity.done"
                  >孵化</option
                >
                <option
                  value="2"
                  *ngIf="ms.game.allPrestige.autoBuyUnlock.autoBuyTeam.done"
                  >团队</option
                >
                <option
                  value="3"
                  *ngIf="ms.game.allPrestige.autoBuyUnlock.autoBuyTwin.done"
                  >双胞胎</option
                >
              </select>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline"
          (click)="multiModal = false"
        >
          取消
        </button>
        <button type="button" class="btn btn-primary" (click)="setMulti(false)">
          已选择
        </button>
        <button type="button" class="btn btn-primary" (click)="setMulti(true)">
          全部
        </button>
      </div>
    </clr-modal>

    <app-action-group
      *ngIf="hatchActionGrp"
      [actGr]="hatchActionGrp"
    ></app-action-group>
    <app-action-group
      *ngIf="teamActionGrp && ms.game.researches.team2.done"
      [actGr]="teamActionGrp"
    ></app-action-group>
    <app-action-group
      *ngIf="twinActionGrp && ms.game.researches.twin.done"
      [actGr]="twinActionGrp"
    ></app-action-group>
  </div>
  <div
    *ngIf="unitGroup"
    class="clr-col-xs-12	clr-col-sm-6	clr-col-md-6	clr-col-lg-6	clr-col-xl-6"
  >
    <h6>自动购买者:</h6>

    <clr-datagrid
      *ngIf="unitGroup"
      class="datagrid-compact"
      [(clrDgSelected)]="unitGroup.selected"
      (clrDgSelectedChange)="selectedChanged($event)"
    >
      <clr-dg-column [clrDgField]="'unit.name'">名称</clr-dg-column>

      <clr-dg-column
        [clrDgSortBy]="unitAutoHatchSorter"
        *ngIf="ms.game.allPrestige.autoBuyUnlock.autoBuyQuantity.done"
      >
        孵化 - 倍数
      </clr-dg-column>
      <clr-dg-column
        [clrDgSortBy]="unitAutoTeamSorter"
        *ngIf="ms.game.allPrestige.autoBuyUnlock.autoBuyTeam.done"
      >
        团队 - 倍数
      </clr-dg-column>
      <clr-dg-column
        [clrDgSortBy]="unitAutoTwinSorter"
        *ngIf="ms.game.allPrestige.autoBuyUnlock.autoBuyTwin.done"
      >
        双胞胎 - 倍数
      </clr-dg-column>
      <clr-dg-row
        *clrDgItems="let unit of unitGroup.unlocked"
        [clrDgItem]="unit"
      >
        <clr-dg-cell>
          <a [routerLink]="'/nav/unit/' + unit.id"> {{ unit.name }} </a>
        </clr-dg-cell>

        <clr-dg-cell
          *ngIf="
            ms.game.allPrestige.autoBuyUnlock.autoBuyQuantity.done &&
            unit.buyAction?.autoBuyer
          "
          class="monospace"
        >
          <clr-checkbox-wrapper>
            <input
              type="checkbox"
              clrCheckbox
              name="chkH"
              (change)="reload()"
              [(ngModel)]="unit.buyAction.autoBuyer.active"
            />
            <label>
              <span class="monospace">
                {{ unit.buyAction?.autoBuyer?.quantity | format: true }}
                {{
                  unit.buyAction?.autoBuyer?.priceSavePercent | format: false
                }}
              </span></label
            >
          </clr-checkbox-wrapper>
        </clr-dg-cell>
        <clr-dg-cell
          *ngIf="ms.game.allPrestige.autoBuyUnlock.autoBuyTeam.done"
          class="monospace"
        >
          <clr-checkbox-wrapper
            *ngIf="unit.teamAction?.autoBuyer?.quantity.gt(0)"
          >
            <input
              type="checkbox"
              clrCheckbox
              name="chkT"
              (change)="reload()"
              [(ngModel)]="unit.teamAction.autoBuyer.active"
            />
            <label>
              <span class="monospace">
                {{ unit.teamAction?.autoBuyer?.quantity | format: true }}
                {{
                  unit.teamAction?.autoBuyer?.priceSavePercent | format: false
                }}
              </span></label
            >
          </clr-checkbox-wrapper>
        </clr-dg-cell>
        <clr-dg-cell
          *ngIf="ms.game.allPrestige.autoBuyUnlock.autoBuyTwin.done"
          class="monospace"
        >
          <clr-checkbox-wrapper
            *ngIf="unit.twinAction?.autoBuyer?.quantity.gt(0)"
          >
            <input
              type="checkbox"
              clrCheckbox
              name="chkW"
              (change)="reload()"
              [(ngModel)]="unit.twinAction.autoBuyer.active"
            />
            <label>
              <span class="monospace">
                {{ unit.twinAction?.autoBuyer?.quantity | format: true }}
                {{
                  unit.twinAction?.autoBuyer?.priceSavePercent | format: false
                }}
              </span>
            </label>
          </clr-checkbox-wrapper>
        </clr-dg-cell>
      </clr-dg-row>
    </clr-datagrid>
  </div>
</div>
